/*
 * @author: Victor
 * @Date: 2021-04-11 14:39:07
 * @LastEditTime: 2021-04-11 19:00:14
 */
window.addEventListener('load', function () {
  // 需求:
  //   1 鼠标滑过focus时 显示向左向右箭头，移出时隐藏
  // 2 动态生成小圆圈(个数和轮播图张数一致)，默认第一个高亮
  // 3 点击小圆圈时切换(animate)到对应的图片,且让当前小圆圈高亮
  // 4 点击向右箭头切换到下一张，小圆圈高亮切换
  // 5 点击向左箭头，切换到上一张，小圆圈高亮切换
  // 6 自动播放(定时器)

  //   获取元素
  var focus = document.querySelector('.focus');
  var left = focus.querySelector('.arrow-l');
  var right = focus.querySelector('.arrow-r');
  var ul = focus.querySelector('ul');
  var ol = focus.querySelector('ol');

  // 关键参数
  var w = focus.offsetWidth; //单张轮播图宽度
  var index = 0; //当前显示图片的索引
  var circle = 0; //当前小圆圈的索引
  var timer; // 自动播放定时器

  var moving = false; //标记动画是否正在进行

  //   显示隐藏
  // 鼠标移入
  focus.addEventListener('mouseenter', function () {
    left.style.display = 'block';
    right.style.display = 'block';
    // 停止自动播放
    clearInterval(timer);
  });
  // 鼠标移出
  focus.addEventListener('mouseleave', function () {
    left.style.display = 'none';
    right.style.display = 'none';
    // 恢复自动播放
    autoplay();
  });
  //   动态生成小圆圈
  for (var i = 0; i < ul.children.length; i++) {
    var li = document.createElement('li');
    li.setAttribute('index', i);
    ol.appendChild(li);
    // 点击li，播放到对应的图片，且高亮切换
    li.onclick = function () {
      //清除当前高亮小圆圈的高亮样式
      focus.querySelector('.current').className = '';
      // 给当前被点击的li加上current类
      this.className = 'current';
      // 播放到对应的图片
      circle = index = this.getAttribute('index');
      animate(ul, -index * w);
    };
  }
  ol.children[0].className = 'current';

  // 点击向右箭头，切换到下一张，无缝切换
  // 将第一个li 复制一份，追加到ul的最后面
  var firstLi = ul.children[0].cloneNode(true);
  ul.appendChild(firstLi);
  // 定义一个全局变量初始值为0,每点击一次向右箭头，该变量自增1,切换到索引值为该变量的那张图片
  right.addEventListener('click', function () {
    // 在切换过程中，不响应用户的再次点击
    if (!moving) {
      moving = true;
      if (index >= ol.children.length) {
        ul.style.left = 0;
        index = 0;
      }
      index++;
      animate(ul, -index * w, function () {
        // 动画结束后moving恢复为false
        moving = false;
      });
      circle++;
      //   if (circle >= ol.children.length) {
      //     circle = 0;
      //   }
      circle >= ol.children.length && (circle = 0);
      highlight();
    }
  });

  // 点击向左箭头，切换到上一张，无缝切换
  left.addEventListener('click', function () {
    if (index <= 0) {
      index = ol.children.length;
      ul.style.left = -index * w + 'px';
    }
    index--;
    animate(ul, -index * w);
    circle--;
    // if (circle < 0) {
    //   circle = ol.children.length - 1;
    // }
    circle < 0 && (circle = ol.children.length - 1);
    highlight();
  });

  // 自动播放
  autoplay();
  function autoplay() {
    timer = setInterval(function () {
      right.click();
    }, 2000);
  }

  function highlight() {
    // 清除当前高亮小圆圈的高亮样式
    focus.querySelector('.current').className = '';
    // 给当前被点击的li加上current类
    ol.children[circle].className = 'current';
  }
});
